<template>
  <div class="table">
    <table>
      <thead>
        <!-- <tr v-if="userInfo.isLeaderMain === 0 && userInfo.isOneLeader === 0"> -->
        <tr>
          <th>
            <span v-if="busSign === 'DEAL_MAIN_LEADER_ASSESS_11'">
              分管负责人评分({{ userInfo.leaderAssessRank | AssessRank }})
            </span>
            <span v-else-if="busSign === 'DEAL_MAIN_LEADER_ASSESS_10'">
              部门负责人评分({{ userInfo.leaderAssessRank | AssessRank }})
            </span>
            <span v-else>分管领导评分({{ userInfo.leaderAssessRank | AssessRank }})</span>
          </th>
          <th v-if="needPeopleAssess">民主测评</th>
          <th v-if="needPlusMinusPoints">加分与扣分</th>
          <th>
            <span v-if="busSign === 'DEAL_MAIN_LEADER_ASSESS_11'">单位主要负责人评分</span>
            <span v-else-if="busSign === 'DEAL_MAIN_LEADER_ASSESS_10'">分管负责人评分</span>
            <span v-else>主要领导评分</span>
          </th>
          <th>总分预估</th>
        </tr>
        <!-- <tr v-else>
          <th>民主测评</th>
          <th>加分与扣分</th>
          <th>主要领导评分</th>
          <th>总分预估</th>
        </tr> -->
      </thead>
      <tbody>
        <!-- <tr v-if="userInfo.isLeaderMain === 0 && userInfo.isOneLeader === 0"> -->
        <tr>
          <td class="leader">
            <span>{{ userInfo.leaderAssessScore }}*{{ getRadio(0) }}</span>
            <van-icon
              name="info-o"
              @click="clickEva"
              v-if="userInfo.leaderScoringExpressionVO || userInfo.leaderScoringSuggestVO || userInfo.leaderRemark" />
          </td>
          <td v-if="needPeopleAssess">{{ userInfo.peopleAssessScore }}*{{ getRadio(1) }}</td>
          <td class="calc_score" v-if="needPlusMinusPoints">
            {{ userInfo.calcScore }}
            <van-icon name="info-o" @click="clickCalc" />
          </td>
          <td>
            <div class="box">
              <span class="total_score">{{ totalScore || 0 }}</span>
              <span>*{{ getRadio(2) }}</span>
            </div>
          </td>
          <td>{{ estimateScore }}</td>
        </tr>
        <!-- <tr v-else-if="(userInfo.isLeaderMain === 1 && userInfo.isOneLeader === 0) || userInfo.isMainLead === 1">
          <td>{{ userInfo.peopleAssessScore }}*50%</td>
          <td class="calc_score">
            {{ userInfo.calcScore }}
            <van-icon name="info-o" @click="clickCalc" />
          </td>
          <td>{{ totalScore || 0 }}*50%</td>
          <td>{{ estimateScore }}</td>
        </tr>
        <tr v-else-if="userInfo.isOneLeader === 1">
          <td>{{ userInfo.peopleAssessScore }}*40%</td>
          <td class="calc_score">
            {{ userInfo.calcScore }}
            <van-icon name="info-o" @click="clickCalc" />
          </td>
          <td>{{ totalScore || 0 }}*60%</td>
          <td>{{ estimateScore }}</td>
        </tr> -->
      </tbody>
    </table>

    <van-dialog v-model="calcDetailShow" title="加分与扣分">
      <!-- <div class="calc_list">
        <div class="li_title">工作纪实逾期</div>
        <div class="li_score">{{ userInfo.noteOnTimeScore }}分</div>
      </div> -->
      <div class="calc_list" v-for="(item, index) in addSubList" :key="index">
        <div class="li_title">
          {{ item.calcScoreName }}
        </div>
        <div class="li_score">{{ item.score }}分</div>
      </div>
    </van-dialog>
    <van-dialog v-model="leaderEvaShow" :title="leaderEvaTitle">
      <div class="dialog-box">
        <template v-if="userInfo.leaderScoringExpressionVO">
          <div class="box_title">承担急难险重任务、处理复杂问题、应对重大考验、防范重大风险的表现</div>
          <div class="box_content">
            {{ userInfo.leaderScoringExpressionVO.expression }}
          </div>
        </template>
        <template v-if="userInfo.leaderScoringSuggestVO">
          <div class="box_title">领导点评</div>
          <div class="box_content">
            {{ userInfo.leaderScoringSuggestVO.suggestion }}
          </div>
        </template>
        <template v-if="userInfo.leaderRemark">
          <div class="box_title">备注</div>
          <div class="box_content">
            {{ userInfo.leaderRemark }}
          </div>
        </template>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getCalcScoreByUserId } from '@api/api-comment.js'
export default {
  name: 'ScoreTable',
  components: {},
  props: {
    userInfo: {
      type: Object,
      default: () => {
        return {
          needId: '',
        }
      },
    },
    totalScore: {
      type: Number | String,
      default: '',
    },
    calcRule: {
      type: Array,
      default: () => {
        return []
      },
    },
    needPlusMinusPoints: {
      type: Boolean,
      default: false,
    },
    needPeopleAssess: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      calcDetailShow: false,
      addSubList: [],
      busSign: this.$route.query.busSign,
      leaderEvaShow: false,
      leaderEvaTitle: '分管领导评价',
    }
  },
  filters: {
    AssessRank(val) {
      switch (val) {
        case '1':
          return '好'
        case '2':
          return '较好'
        case '3':
          return '一般'
        case '4':
          return '较差'
        case '':
          return '-'
        default:
          break
      }
    },
  },
  computed: {
    ...mapGetters(['activeNeedId']),
    estimateScore() {
      return (
        (
          this.userInfo.leaderAssessScore * this.calcRule[0] +
          this.userInfo.calcScore * this.calcRule[3] +
          this.totalScore * this.calcRule[2] +
          this.userInfo.peopleAssessScore * this.calcRule[1]
        ).toFixed(1) * 1
      )
      if (this.userInfo.isLeaderMain === 0 && this.userInfo.isOneLeader === 0) {
        return (
          (
            this.userInfo.leaderAssessScore * 0.4 +
            this.userInfo.peopleAssessScore * 0.4 +
            this.userInfo.calcScore +
            this.totalScore * 0.2
          ).toFixed(1) * 1
        )
      } else if (
        (this.userInfo.isLeaderMain === 1 && this.userInfo.isOneLeader === 0) ||
        this.userInfo.isMainLead === 1
      ) {
        // 1.领导成员，2.由主要领导管理的曾经担任领导和享受非领导职务待遇人员
        return (this.userInfo.peopleAssessScore * 0.5 + this.userInfo.calcScore + this.totalScore * 0.5).toFixed(1) * 1
      } else if (/* this.userInfo.isLeaderMain === 1 && */ this.userInfo.isOneLeader === 1) {
        // 非领导成员，主要领导和分管领导是同一人时
        return (this.userInfo.peopleAssessScore * 0.4 + this.userInfo.calcScore + this.totalScore * 0.6).toFixed(1) * 1
      }
    },
  },

  watch: {
    activeNeedId: {
      handler(news) {
        this.needId = news
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    this.leaderEvaTitle =
      this.$route.query.busSign === 'DEAL_MAIN_LEADER_ASSESS_11'
        ? '分管负责人评价'
        : this.$route.query.busSign === 'DEAL_MAIN_LEADER_ASSESS_10'
        ? '部门负责人评价'
        : '分管领导评价'
  },
  methods: {
    clickCalc() {
      getCalcScoreByUserId({
        needId: this.needId,
        userId: this.userInfo.userId,
      }).then(res => {
        if (res.status === 200) {
          this.addSubList = res.data
        }
        this.calcDetailShow = true
      })
    },
    clickEva() {
      this.leaderEvaShow = true
    },
    getRadio(idx) {
      return this.calcRule[idx] * 100 + '%'
    },
  },
}
</script>

<style lang="scss" scoped>
.table {
  font-size: 12px;
  margin-top: 8px;
  table {
    width: 100%;
    border-right: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;
  }
  tr {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    th,
    td {
      flex: 1;
      padding: 4px 5px;
      border-left: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
  .leader {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .van-icon-info-o {
      position: absolute;
      right: 3px;
      bottom: 3px;
      font-size: 13px;
    }
  }
  .total_score {
    color: #d9001b;
  }
  .calc_score {
    position: relative;
    .van-icon-info-o {
      position: absolute;
      right: 3px;
      bottom: 3px;
      font-size: 13px;
    }
  }
  .calc_list {
    // margin: 0 14px;
    padding: 6px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f7f7f7;
    &:last-child {
      border-bottom: 0;
    }
    .li_title {
      flex: 1;
      margin-right: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  }
  .dialog-box {
    padding: 0 16px;
    font-size: 14px;
    .box_title {
      font-weight: bold;
      margin-bottom: 8px;
      color: #333;
    }
    .box_content {
      border: 1px solid #ccc;
      padding: 5px 8px;
      border-radius: 6px;
      margin-bottom: 8px;
      &:last-child {
        margin-bottom: 5px;
      }
    }
  }
}
</style>
